<template>
  <view class="category-list">
    <view class="category-item" v-for="(item, idx) in categories" :key="idx" @click="onCategoryClick(item)">
      <view :class="['category-icon', item.bg]">
        <text>{{ item.icon }}</text>
      </view>
      <text class="category-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    categories: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onCategoryClick(category) {
      if (category.text === '更多') {
        // 点击更多，跳转到全部商品列表
        uni.navigateTo({
          url: '/pages/product/list'
        });
      } else {
        // 点击具体分类，跳转到对应分类的商品列表
        const categoryMap = {
          '数码': '数码产品',
          '服装': '服装配饰',
          '书籍': '图书音像',
          '游戏': '运动户外'
        };
        
        const categoryName = categoryMap[category.text] || category.text;
        
        uni.navigateTo({
          url: `/pages/product/list?category=${encodeURIComponent(categoryName)}`
        });
      }
    }
  }
};
</script>

<style scoped>
.category-list { display: flex; justify-content: space-around; background: #fff; padding: 12px 0; }
.category-item { display: flex; flex-direction: column; align-items: center; }
.category-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; font-size: 22px; }
.bg-primary { background: #FF5E5E22; color: #FF5E5E; }
.bg-secondary { background: #FFB80022; color: #FFB800; }
.bg-green { background: #D1FAE5; color: #10B981; }
.bg-blue { background: #DBEAFE; color: #3B82F6; }
.bg-purple { background: #E9D5FF; color: #8B5CF6; }
.category-text { font-size: 12px; color: #333; }
</style>
